@imgUrl: "/pr/pc/images/skin/dark-digital";
.frame-bg {
	background: url("@{imgUrl}/bg.jpg");
}
.header-area {
	// background: url(/pr/pc/images/skin/light-default/header_bg.jpg) no-repeat;
	background: 0 0;
	border: 0;
	flex-direction: column;
	height: auto;
	.logo-area {
		&::before {
			content: "";
			background: url("@{imgUrl}/header_left.png") right 18px no-repeat;
			height: 100%;
			flex-grow: 1;
		}
		&::after {
			content: "";
			background: url("@{imgUrl}/header_right.png") left 18px no-repeat;
			height: 100%;
			flex-grow: 1;
		}
	}
	.head-menu-area-bk {
		flex-grow: 1;
		.head-menu-area-main {
			position: relative;
			top: 0;
			.head-menu-area {
				display: flex;
				justify-content: center;
				height: auto;
				max-height: 300px;
				ul {
					position: relative;
					top: 0;
					height: auto;
					li {
						border-image-source: url("@{imgUrl}/topbtn.png");
						border-image-slice: 18 fill;
						border-width: 18px;
						border-style: solid;
						background-clip: padding-box;
						position: relative;
						display: inline-block;
						margin: 0 0 5px 5px;
						a {
							display: block;
							font-size: 16px;
							margin-top: -20px;
							margin-bottom: -20px;
							padding: 12px 20px;
							font-weight: 700;
							text-shadow: 1px 2px 1px #333;
							color: #fff;
							// color: #f59a17;
						}
						&:hover {
							text-decoration: none;
							-webkit-filter: brightness(1.3);
							filter: brightness(1.3);
						}
						&.hover {
							a {
								color: #f59a17;
							}
						}
					}
				}
			}
		}
	}
}
.main {
	border-width: 20px;
	border-style: solid;
	background-clip: padding-box;
	background-color: rgba(255, 255, 255, 0) !important;
	margin: 0 10px 10px;
	border-image-source: url("@{imgUrl}/bk2.png");
	border-image-slice: 20 fill;
}
